import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import * as redux from 'redux'
import { Provider, connect } from 'react-redux'
import * as actions from './redux/actions'
import reducers from './redux/reducer'

function App(props) {
  return (
    <div id="main">
    	<div className="main-frame">
    		<div className="main-viewport">
    			{/* vacation private content=s  */}
    			<div className="body nofoot">
    				<div className="wrap_destionation_search search_top_fixed">
    					{/*ABtesting b版 */}
    					<div className="search_wrap2">
    						<div className="search_p">
    							<div className="search_box2">
    								<input
    									type="text"
    									className="search_text nofastclick"
    									placeholder="订单号、旅客姓名、联系人手机"
                      value={props.searchText}
                      onChange={(event) => {
                        props.updateSearchText({ text: event.currentTarget.value })
                      }}
                    />
                    <a href="###" className="clear_input2" onClick={() => {
                        props.clearSearchText()
                      }} />
    								<a
    									href="javascript:;"
    									className="dest_search_btn2"
                      onClick={() => {
                        const { searchText, inputHistory } = props
                        if (!searchText || !searchText.trim()) {
                          return
                        }
                        let historyInput = [searchText, ...inputHistory]
                        historyInput = historyInput.filter((value, index, array) => array.indexOf(value) === index)
                        props.updateInputHistory({ inputHistory: historyInput })
                      }}
                    >
                      搜索
                    </a>
    							</div>
    						</div>
    					</div>
    					<p className="destionation_history">
                {props.inputHistory.map(value => {
                  return (
                    <a
                      href="###"
                      key={value}
                      data-payload={JSON.stringify({ value })}
                      onClick={() => {
                        props.fillInSearchText({ value: value })
                      }}
                    >
                      {value}
                    </a>
                  )
                })}
    					</p>
    				</div>
    				{/*  */}
    			</div>
    			{/* vacation private content=e  */}
    		</div>
    	</div>
    </div>
  )
}

const mapStateToProps = state => {
  return {
    inputHistory: state.inputHistory,
    searchText: state.searchText
  }
}

const mapDispatchToProps = dispatch => {
  return redux.bindActionCreators(actions, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(App)
